<template>
    <div class="contenter dayReport1">
        <div class="center fontSize16 mt20 mb20">
            <span class="fontSize14 colorOrange"> < {{brandName}} > </span>
            <span class="fontbold">{{activeNav==3?`${nowDate}年`:nowDate}}{{reportList.total.isIncludeStore?'门店':'区域'}}报表</span></div>
        <div class="mb20" style="position: sticky;top: 0;">
            <van-dropdown-menu active-color="#4873c1">
                <!-- <van-dropdown-item v-model="brandVal" :options="brandList" @change='getChangeDrop' /> -->

                <!-- <van-dropdown-item  v-model="dateVal" @open='goOpen' :options="dateList" ref="item">
                </van-dropdown-item> -->

                <van-dropdown-item v-model="typeVal" @change='getType' :options="option" ref="item">
                </van-dropdown-item>
            </van-dropdown-menu>
        </div>
         <div class="fontSize11 color999 mb10 center" v-if="typeVal==1&&activeNav=='2'">【总计】月累销售额：{{reportList.total.thisMonthSales}}万</div>
        <div class="fontSize11 color999 mb10 center" v-if="typeVal==2&&activeNav=='2'">【总计】月累消费人数：{{reportList.total.thisMonthConsumersNumber}}  | 年累消费人数：{{reportList.total.thisYearConsumersNumber}}</div>
        <div class="fontSize11 color999 mb10 center" v-if="typeVal==1&&activeNav=='3'">【总计】年累计销售额：{{reportList.total.thisYearSales}}万</div>
        <div class="fontSize11 color999 mb10 center" v-if="typeVal==2&&activeNav=='3'">【总计】年累消费人数：{{reportList.total.thisYearConsumersNumber}}</div>
        <div class="mainContent fontSize0" v-if="reportList.list.length>0">
            <div v-for="(item,index) in reportList.list" :key="index">
                <div class="title flex flexCenter alignCenter fontSize16 fontbold">{{item.name}}</div>
                <div class="contentlayout" v-if="activeNav=='2'">
                    <!--销售表头-->
                    <!-- <div class="flex alignCenter flexBetween subTitle colorfff fontSize12 flexCenter" v-if="typeVal==1">
                        <div class="flex1 flex flexCenter alignCenter">区域名称</div>
                        <div class="w14 flex flexCenter alignCenter" v-if="item.id==25"  @click="goSort(item.sort,'thisMonthNetSales',item.id)">当月净销额(万)</div>
                        <div class="w14 flex flexCenter alignCenter" @click="goSort(item.sort,'thisMonthSales',item.id)">月累销售额(万)</div>
                        <div class="w14 flex flexCenter alignCenter" @click="goSort(item.sort,'lastYearThisMonthSales',item.id)">同期月累销售额(万)</div>
                        <div class="w14 flex flexCenter alignCenter" @click="goSort(item.sort,'thisMonthLiftRate',item.id)">月累计同期提升比</div>
                    </div> -->
                    <div class=" subTitle colorfff fontSize12 center" v-if="typeVal==1" style="display:block">
                        <div class="w14 disInline ">区域名称</div>
                        <div class="w14 disInline" v-if="item.id==25"  @click="goSort(item.sort,'thisMonthNetSales',item.id)">当月净销额(万)</div>
                        <div class="w14 disInline tableTitleBgcolor" @click="goSort(item.sort,'thisMonthSales',item.id)">月累销售额(万)</div>
                        <div class="w14 disInline tableTitleBgcolor" @click="goSort(item.sort,'lastYearThisMonthSales',item.id)">同期月累销售额(万)</div>
                        <div class="w14 disInline tableTitleBgcolor"  @click="goSort(item.sort,'thisMonthLiftRate',item.id)">月累计同期提升比</div>
                        <div class="w14 disInline tableTitleBgcolor"  @click="goSort(item.sort,'thisMonthSameDepotLiftRateText',item.id)">月累计同期同店提升比</div>
                    </div>
                    <!--vip表头-->
                    <div class="flex alignCenter flexAround subTitle colorfff fontSize13" v-if="typeVal==2">
                        <div class="w24 flex flexCenter alignCenter">区域名称</div>
                        <div class="w24 flex flexCenter alignCenter">月累消费人数</div>
                        <div class="w24 flex flexCenter alignCenter">年累消费人数</div>
                    </div>
                    <!--销售列表-->
                    <div class="reportListContent disInline fontSize13" v-if="typeVal==1">
                        <div v-for='(e,elindex) in item.child' :key="elindex" class="flex flexBetween flexCenter" @click="goLink(e.brand_id,e.id,e.click,item.id)">
                            <div class="w14 borderGray regionName flex flexCenter alignCenter fontSize13">{{e.name}}</div>
                            <div class="w14 borderGray flex flexCenter alignCenter" v-if="e.id==20">{{e.data.thisMonthNetSales}}</div>
                            <!-- <div class="w14 borderGray flex flexCenter alignCenter">{{e.data.thisDaySales}}</div> -->
                            <div class="w14 borderGray flex flexCenter alignCenter">{{e.data.thisMonthSales}}</div>
                            <div class="w14 borderGray flex flexCenter alignCenter">{{e.data.lastYearThisMonthSales}}</div>
                            <div class="w14 borderGray flex flexCenter alignCenter" :class="{'colorGreen':e.data.thisMonthLiftRate<0,'colorRed':e.data.thisMonthLiftRate > 0}">{{e.data.thisMonthLiftRateText===''?'-':e.data.thisMonthLiftRateText}}</div>
                            <div class="w14 borderGray flex flexCenter alignCenter" :class="{'colorGreen':e.data.thisMonthSameDepotLiftRate<0,'colorRed':e.data.thisMonthSameDepotLiftRate > 0}">{{e.data.thisMonthSameDepotLiftRateText===''?'-':e.data.thisMonthSameDepotLiftRateText}}</div>
                            <!-- <div class="w14 borderGray flex flexCenter alignCenter" v-if="item.is_area" :class="{'colorGreen':e.data.thisMonthSameDepotLiftRate<0,'colorRed':e.data.thisMonthSameDepotLiftRate > 0}">{{e.data.thisMonthSameDepotLiftRateText===''?'-':e.data.thisMonthSameDepotLiftRateText}}</div> -->
                            <!-- <div class="w14 borderGray flex flexCenter alignCenter" v-if="!item.is_area">{{e.data.thisDayPreSales}}</div> -->
                        </div>
                    </div>
                    <!--销售小计-->
                    <div class=" colorBlue fontbold fontSize14" v-if="typeVal==1" style="display: -webkit-box;position: relative; z-index:-1">
                        <div class="w14 borderGray regionName flex flexCenter alignCenter">{{item.subtotal.name}}</div>
                        <div class="w14 borderGray flex flexCenter alignCenter" v-if="item.id==25">{{item.subtotal.data.thisMonthNetSales}}</div>
                        <!-- <div class="w14 borderGray flex flexCenter alignCenter">{{item.subtotal.data.thisDaySales}}</div> -->
                        <div class="w14 borderGray flex flexCenter alignCenter">{{item.subtotal.data.thisMonthSales}}</div>
                        <div class="w14 borderGray flex flexCenter alignCenter">{{item.subtotal.data.lastYearThisMonthSales}}</div>
                        <div class="w14 borderGray flex flexCenter alignCenter" :class="{' colorGreen':item.subtotal.data.thisMonthLiftRate<0,'colorRed':item.subtotal.data.thisMonthLiftRate > 0}">{{item.subtotal.data.thisMonthLiftRateText}}</div>
                        <div class="w14 borderGray flex flexCenter alignCenter" :class="{' colorGreen':item.subtotal.data.thisMonthSameDepotLiftRate<0,'colorRed':item.subtotal.data.thisMonthSameDepotLiftRate > 0}">{{item.subtotal.data.thisMonthSameDepotLiftRateText}}</div>
                        <!-- <div class="w14 borderGray flex flexCenter alignCenter" v-if="item.is_area" :class="{' colorGreen':item.subtotal.data.thisMonthSameDepotLiftRate<0,'colorRed':item.subtotal.data.thisMonthSameDepotLiftRate > 0}">{{item.subtotal.data.thisMonthSameDepotLiftRateText===''?'-':item.subtotal.data.thisMonthSameDepotLiftRateText}}</div> -->
                        <!-- <div class="w14 borderGray flex flexCenter alignCenter" v-if="!item.is_area" >{{item.subtotal.data.thisDayPreSales}}</div> -->
                    </div>
                    <!--vip列表-->
                    <div class="reportListContent fontSize13" v-if="typeVal==2">
                        <div v-for='(e,elindex) in item.child' :key="elindex" class="flex flexBetween flexCenter" @click="goLink(e.brand_id,e.id,e.click,item.id)">
                            <div class="w24 borderGray fontSize13">{{e.name}}</div>
                            <div class="w24 borderGray">{{e.data.thisMonthConsumersNumber}}</div>
                            <div class="w24 borderGray">{{e.data.thisYearConsumersNumber}}</div>
                        </div>
                    </div>
                    <!--vip小计-->
                    <div class="flex flexBetween flexCenter colorBlue fontbold fontSize14" v-if="typeVal==2">
                        <div class="w24 borderGray flex flexCenter alignCenter">{{item.subtotal.name}}</div>
                        
                        <div class="w24 borderGray flex flexCenter alignCenter">{{item.subtotal.data.thisMonthConsumersNumber}}</div>
                        <div class="w24 borderGray flex flexCenter alignCenter">{{item.subtotal.data.thisYearConsumersNumber}}</div>
                    </div>
                </div>
                <div class="contentlayout" v-if="activeNav=='3'">
                    <!--销售表头-->
                    <div class=" subTitle colorfff fontSize12 center" v-if="typeVal==1" style="display:block">
                        <div class="w14 disInline ">区域名称</div>
                        <!-- <div class="w14 disInline" v-if="item.id==25"  @click="goSort(item.sort,'thisMonthNetSales',item.id)">年净销额(万)</div> -->
                        <div class="w14 disInline" @click="goSort(item.sort,'thisYearSales',item.id)">年累销售额(万)</div>
                        <div class="w14 disInline"  style="background-color:#85aaee" @click="goSort(item.sort,'lastYearThisMonthSales',item.id)">同期年累销售额(万)</div>
                        <div class="w14 disInline"  style="background-color:#85aaee" @click="goSort(item.sort,'thisYearLiftRate',item.id)">年累同期提升比</div>
                        <div class="w14 disInline"  style="background-color:#85aaee" @click="goSort(item.sort,'thisYearSameDepotLiftRateText',item.id)">年累同期同店提升比</div>
                    </div>
                    <!--销售列表-->
                    <div class="reportListContent disInline fontSize13" v-if="typeVal==1">
                        <div v-for='(e,elindex) in item.child' :key="elindex" class="flex flexBetween flexCenter" @click="goLink(e.brand_id,e.id,e.click,item.id)">
                            <div class="w14 borderGray regionName flex flexCenter alignCenter fontSize13">{{e.name}}</div>
                            <!-- <div class="w14 borderGray flex flexCenter alignCenter" v-if="e.id==20">{{e.data.thisMonthNetSales}}</div> -->
                            <div class="w14 borderGray flex flexCenter alignCenter">{{e.data.thisYearSales}}</div>
                            <div class="w14 borderGray flex flexCenter alignCenter">{{e.data.lastYearSales}}</div>
                            <div class="w14 borderGray flex flexCenter alignCenter" :class="{'colorGreen':e.data.thisYearLiftRate<0,'colorRed':e.data.thisYearLiftRate > 0}">{{e.data.thisYearLiftRateText===''?'-':e.data.thisYearLiftRateText}}</div>
                            <div class="w14 borderGray flex flexCenter alignCenter" :class="{'colorGreen':e.data.thisYearSameDepotLiftRate<0,'colorRed':e.data.thisYearSameDepotLiftRate > 0}">{{e.data.thisYearSameDepotLiftRateText===''?'-':e.data.thisYearSameDepotLiftRateText}}</div>
                        </div>
                    </div>
                    <!--销售小计-->
                    <div class=" colorBlue fontbold fontSize14" v-if="typeVal==1" style="display: -webkit-box;position: relative; z-index:-1">
                        <div class="w14 borderGray regionName flex flexCenter alignCenter">{{item.subtotal.name}}</div>
                        <!-- <div class="w14 borderGray flex flexCenter alignCenter" v-if="item.id==25">{{item.subtotal.data.thisMonthNetSales}}</div> -->
                        <div class="w14 borderGray flex flexCenter alignCenter">{{item.subtotal.data.thisYearSales}}</div>
                        <div class="w14 borderGray flex flexCenter alignCenter">{{item.subtotal.data.lastYearSales}}</div>
                        <div class="w14 borderGray flex flexCenter alignCenter" :class="{' colorGreen':item.subtotal.data.thisYearLiftRate<0,'colorRed':item.subtotal.data.thisYearLiftRate > 0}">{{item.subtotal.data.thisYearLiftRateText}}</div>
                        <div class="w14 borderGray flex flexCenter alignCenter" :class="{' colorGreen':item.subtotal.data.thisYearSameDepotLiftRate<0,'colorRed':item.subtotal.data.thisYearSameDepotLiftRate > 0}">{{item.subtotal.data.thisYearSameDepotLiftRateText}}</div>
                    </div>
                    <!--vip表头-->
                    <div class="flex alignCenter flexAround subTitle colorfff fontSize13" v-if="typeVal==2">
                        <div class="flex1 flex flexCenter alignCenter">区域名称</div>
                        <!-- <div class="w24 flex flexCenter alignCenter">月累消费人数</div> -->
                        <div class="w24 flex flexCenter alignCenter">年累消费人数</div>
                    </div>
                    <!--vip列表-->
                    <div class="reportListContent fontSize13" v-if="typeVal==2">
                        <div v-for='(e,elindex) in item.child' :key="elindex" class="flex flexAround flexCenter" @click="goLink(e.brand_id,e.id,e.click,item.id)">
                            <div class="flex1 flex flexCenter alignCenter borderGray fontSize13">{{e.name}}</div>
                            <!-- <div class="w24 borderGray">{{e.data.thisMonthConsumersNumber}}</div> -->
                            <div class="w24 borderGray">{{e.data.thisYearConsumersNumber}}</div>
                        </div>
                    </div>
                    <!--vip小计-->
                    <div class="flex flexBetween flexCenter colorBlue fontbold fontSize14" v-if="typeVal==2">
                        <div class="flex1 borderGray flex flexCenter alignCenter">{{item.subtotal.name}}</div>
                        
                        <!-- <div class="w24 borderGray flex flexCenter alignCenter">{{item.subtotal.data.thisMonthConsumersNumber}}</div> -->
                        <div class="w24 borderGray flex flexCenter alignCenter">{{item.subtotal.data.thisYearConsumersNumber}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div style="display:none">
            <div v-for="(item,index) in reportList.list" :key="index">
                <div class="title flex flexCenter alignCenter fontSize16 fontbold">{{item.name}}</div>
                <div class="mainTable">
                    <table cellspacing="0">
                        <thead>
                            <tr class="tableTitleBgcolor colorfff fontSize12">
                                <th class="tableTitleBgcolor">区域名称</th>
                                <th class="tableTitleBgcolor" v-if="item.id==25" @click="goSort(item.sort,'thisMonthNetSales',item.id)">当月净销额</th>
                                <!-- <th class="tableTitleBgcolor" @click="goSort(item.sort,'thisDaySales',item.id)">当天销售额(<span>{{item.is_area?'万':'元'}}</span>)</th> -->
                                <th class="tableTitleBgcolor" @click="goSort(item.sort,'thisMonthSales',item.id)">月累销售额(<span>{{item.is_area?'万':'元'}}</span>)</th>
                                <th class="tableTitleBgcolor" @click="goSort(item.sort,'lastYearThisMonthSales',item.id)">同期月累销售额(万)</th>
                                <th class="tableTitleBgcolor" @click="goSort(item.sort,'thisMonthLiftRate',item.id)">月累同期提升比</th>
                                <th class="tableTitleBgcolor" @click="goSort(item.sort,'thisMonthLiftRate',item.id)">月累同期同店提升比</th>
                                <th class="tableTitleBgcolor" @click="goSort(item.sort,'thisDayPreSales',item.id,9)" v-if="!item.is_area">预售(元)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr  v-for='(e,elindex) in item.child' :key="elindex"  @click="goLink(e.brand_id,e.id,e.click,item.id)">
                                <td class="fontSize13">{{e.name}}</td>
                                <td v-if="e.id==20">{{e.data.thisMonthNetSales}}</td>
                                <!-- <td>{{e.data.thisDaySales}}</td> -->
                                <td>{{e.data.thisMonthSales}}</td>
                                <td>{{e.data.lastYearThisMonthSales}}</td>
                                <td :class="{'colorGreen':e.data.thisMonthLiftRate<0,'colorRed':e.data.thisMonthLiftRate > 0}">{{e.data.thisMonthLiftRateText}}</td>
                                <td v-if="!item.is_area">{{e.data.thisDayPreSales}}</td>
                            </tr>
                            <!-- <tr class="whiteBg colorBlue fontbold" style="position:sticky;bottom:0;z-index:999">
                                <td>{{item.subtotal.name}}</td>
                                <td>{{item.subtotal.data.thisDaySales}}</td>
                                <td>{{item.subtotal.data.thisDaySales}}</td>
                                <td>{{item.subtotal.data.thisDaySales}}</td>
                                <td>{{item.subtotal.data.thisDaySales}}</td>
                                <td>{{item.subtotal.data.thisDaySales}}</td>
                                <td>{{item.subtotal.data.thisDaySales}}</td>
                                
                            </tr> -->
                        </tbody>
                    </table>
                </div>
            </div>
            
        </div>
        <!--总计-->
        <!-- <div class="flex flexBetween flexCenter Subtotal colorBlue fontSize15 fontbold allTotal" v-if="typeVal==1&&reportList.list.length>0">
            <div class="flex1 borderGray flex flexCenter alignCenter">总计</div>
            <div class="w14 borderGray">{{reportList.total.thisMonthSales}}</div>
            <div class="w14 borderGray" :class="{' colorGreen':reportList.total.thisMonthLiftRate<0,'colorRed':reportList.total.thisMonthLiftRate > 0}">{{reportList.total.thisMonthLiftRateText===''?'-':reportList.total.thisMonthLiftRateText}}</div>
        </div> -->
        <!-- <div class="flex flexBetween flexCenter Subtotal colorBlue fontSize15 fontbold allTotal" v-if="typeVal==2&&reportList.list.length>0">
            <div class="w24 borderGray">总计</div>
            <div class="w24 borderGray">{{reportList.total.thisMonthConsumersNumber}}</div>
            <div class="w24 borderGray">{{reportList.total.thisYearConsumersNumber}}</div>
        </div> -->
        <!-- <div class="fontSize12 right mt5 color999" v-if="reportList.list.length>0">*数据以系统为准</div> -->
        <div class="center color999" style="margin-top:2rem" v-if="reportList.list.length==0">暂无数据~</div>
        <van-calendar v-model="show" @confirm="onConfirmDate" color="#4873c1" :min-date="minDate" :max-date="maxDate" />
    </div>
</template>
<script>
import { Toast} from 'vant'
import {GetQueryStr} from '@/common/common.js'
export default{
    name:'monthSalesWarehouse',
    data(){
        return{
            brandVal:1,
            brandList:[],
            typeVal:1,
            option: [
                { text: '销售额', value: 1 },
                { text: 'vip', value: 2 },
            ],
            dateVal:'',
            dateList:[],
            nowDate:'',
            day:'',
            month:'',
            reportList:{
                list:[],
                total:{}
            },
            show:false,
            minDate: '',
            maxDate: '',
            brandId:'',
            brandName:'',
            activeNav:'',
            isLoading:true,
            channelId:''
        }
    },
    created(){
        let parm=this.$route.query
        console.log('这是parm',parm)
        //时间
        var date=new Date()
        var preDate=new Date(date.getTime() - (24*60*60*1000))
        let year=preDate.getFullYear()
        let month=preDate.getMonth() + 1
        let day= preDate.getDate()

        month<10?month='0'+month: ''
        day<10?day='0'+day: ''


        this.day=parm.day
        this.month=parm.month
        this.nowDate=parm.date
        this.brandName=parm.brandName
        this.activeNav=parm.activeNav
        this.channelId=parm.channelId
        //console.log('年月日',year,month,day)
        let obj={
            text: this.nowDate, value: parm.day
        }
        this.dateVal=parm.day
        this.dateList=[obj]
        // this.minDate=new Date(2021, parm.month, parm.day)
        // this.maxDate=new Date(year, preDate.getMonth(), parm.day)
        this.minDate=new Date(2021, month, day)
        this.maxDate=new Date(year, preDate.getMonth(), day)

        //token
        let token=GetQueryStr('token')
        if(token&&token!==''){
            localStorage.setItem('token',token)
        }
        this.brandId= parm.id

        this.getDayReportByRegion(1,'thisMonthLiftRate',0)
        
        
    },
    methods:{
        getDayReportByRegion(type,name,id){//区域报表
            if(this.isLoading){
                Toast.loading({
                    message: '加载中',
                    forbidClick: true,
                    duration:0
                })
            }
            let obj={
                channelId:this.channelId,
                date:this.nowDate,
                brandId:this.brandId,
                sort_big_area_id:id,
                sort_way:type,//1 降序    2  升序
                sort_field:name //排序字段：当天销售额thisDaySales、月累计销售额thisMonthSales、月累计同期提升比thisMonthLiftRate、月累计同店同期提升比thisMonthSameDepotLiftRate
                //date:'',
                // brandId:this.brandVal
            }
            console.log('提交参数11',obj)
            if(this.activeNav==2){
                this.getReportByMonth(type,obj)
                
            }
            if(this.activeNav==3){
                this.getReportByYear(type,obj)
            }
            // this.$apiRequest.getReportByMonth(obj).then(res=>{
            //     console.log('获取月份报表',res)
            //     if(res.code==1){
            //         res.data.list.map(i=>{
            //             i.subtotal=i.child.pop()
            //             i.sort= type==2?1:2
            //             i.subtotal['is_area']=i.is_area
            //         })
            //         this.reportList=res.data
            //         console.log('this.reportList',this.reportList)
            //     }
            //     Toast.clear()
            // })


            // this.$apiRequest.getDayReportByRegion(obj).then(res=>{
            //     console.log('获取报表',res)
            //     if(res.code==1){
            //         res.data.list.map(i=>{
            //             i.subtotal=i.child.pop()
            //             i.subtotal['is_area']=i.is_area
            //         })
            //         this.reportList=res.data
            //         console.log('this.reportList',this.reportList)
            //     }
            //     Toast.clear()
            // })
        },
        getReportByMonth(type,obj){
            this.$apiRequest.getReportByMonth(obj).then(res=>{
                console.log('获取月份报表',res)
                if(res.code==1){
                    res.data.list.map(i=>{
                        i.subtotal=i.child.pop()
                        i.sort= type==2?1:2
                        i.subtotal['is_area']=i.is_area
                    })
                    this.reportList=res.data
                    // console.log('this.reportList',this.reportList)
                }
                Toast.clear()
            })
        },
        getReportByYear(type,obj){
            this.$apiRequest.getReportByYear(obj).then(res=>{
                console.log('获取年报表',res)
                if(res.code==1){
                    res.data.list.map(i=>{
                        i.subtotal=i.child.pop()
                        // console.log('i.subtotal',i.subtotal)
                        i.sort= type==2?1:2
                        i.subtotal['is_area']=i.is_area
                    })
                    this.reportList=res.data
                    console.log('this.reportList',this.reportList)
                }
                Toast.clear()
            })
        },
        getChangeDrop(e){
            console.log('下拉',e)
            this.brandVal=e
            this.getDayReportByRegion()
        },
        getType(e){
            // console.log('下拉啦啦啦',e)
            this.typeVal=e
        },
        goOpen(){
            this.show=true
        },
        goLink(id,areaId,click,bigAreaId){
            console.log('点击了',id,areaId,click)
            console.log('详情',bigAreaId)
            if(!click){
                return
            }
            this.$router.push({name:'monthAreaDeatil',query:{id:id,areaId:areaId,date:this.nowDate,brandName:this.brandName,day:this.day,month:this.month,activeNav:this.activeNav,bigAreaId:bigAreaId}})
        },
        onConfirmDate(date){
            this.show=false
            let month=date.getMonth() + 1
            let day=date.getDate()
            month<10?month='0'+month: ''
            day<10?day='0'+day: ''
            this.day=day
            this.month=month
            let activeDate=`${date.getFullYear()}-${month}-${day}`
            this.dateList=[{text:activeDate,value:date.getDate()}]
            this.dateVal=date.getDate()
            this.nowDate=activeDate
            this.getDayReportByRegion()
        },
        goSort(type,name,id){
            this.isLoading=false
            this.getDayReportByRegion(type,name,id)
        }
    }
}

</script>
<style >
.dayReport1 .van-overlay{
    background-color: rgba(0, 0, 0, 0.9)
}
/* .van-dropdown-item{
    max-width: 7rem;
    transform: translateX(-50%);
    left: 50%;
    width: 100%;
} */
</style>
<style lang='less' scoped>
.dayReport1,.allTotal{
    max-width: 7rem;
}

.w14{
    // width: 13%;
    width: 2.4rem;
    padding: 0.2rem 0;
    text-align: center;
    // height: 0.9rem;
    // line-height: 0.6rem;
    // border: 1px #777 solid;
}
.w24{
    width: 2.4rem;
    padding: 0.14rem 0;
    text-align: center;
}
.reportListContent{
    max-height:6rem;
    overflow-y: scroll;
    .regionName{
        background-color: #f1f1f1;
        white-space: pre-wrap
    }
}
.contenter{
    width: 92%;
    margin: 0 auto;
    .title{
        background-color: rgba(83,114,192,0.1);
        padding: 0.1rem 0;
    }
    .mainContent{
        padding-bottom: 1.2rem;
    }
    .subTitle{
        // height: 1rem;
        background-color: #85aaee;
        // padding: 0.1rem 0;
        .w14{
            // height: 1rem;
            // line-height: 0.76rem;
        }
    }
    .Subtotal{
        background: #fdebe8;
        position: fixed;
        width: 92%;
        bottom: 0.48rem;
        left: 50%;
        z-index: 1;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);


        // width: 100%;
        // padding: 0.1rem 0;
    }
}
.borderGray{
    // background-color: #85aaee;
    // padding: 0.1rem 0;
    border:1px #eee solid
}
.borderBlue{
    border:1px #83a6e7 solid
}
.contentlayout{
    display: block;
    white-space: nowrap;
    overflow-x: auto;
}
// .w33{
//     width: 25%;
//     padding: 0.24rem 0;
//     border:1px #eee solid;
//     background-color: #fff;
// }
// .listContent{
//     margin-bottom: 0.4rem;
//     position: sticky;
//     top: 0.86rem;
//     z-index: 99;
//     .w33:nth-child(3n){
//         border-right:none !important
//     }
// }
.mainTable{
    overflow:auto;
    height: 9rem;
    td,th{
        // border:1px solid gray;
        width:100px;
        height:40px;
        border:1px #eee solid;
        text-align: center;
    }
    th{
        position: relative;
        z-index: 999;
    }
    table{
        table-layout:fixed;
        width:900px;
    }
    td:first-child,th:first-child{
        position:sticky;
        left:0;
        z-index:1;
        // background-color:lightpink;
    }
    thead tr th{
        position:sticky;
        top:0;
    }
    td:first-child{
        background-color: #f1f1f1;
        z-index: 1;
    }
    th:first-child{
        z-index:999999;
        // background-color:lightblue;
    }
}
</style>
